<template>
  <div class="login">
    <img class="login-img" src="@/assets/loginBg.jpg" alt="">
    <el-card>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item>
          <div class="head-title">彩票管理系统</div>
        </el-form-item>
        <el-form-item prop="name">
          <el-input auto-complete="off" clearable placeholder="请输入用户名" v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input auto-complete="off" clearable type="password" placeholder="请输入密码" v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="ruleForm.remember">记住我</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button class="submit" type="primary" @click="submitForm">登 录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
@Component
export default class Login extends Vue {
  ruleForm = {
    name: 'admin',
    password: '111111',
    remember: false
  }
  rules = {
    name: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { pattern: /admin/, message: '用户名不正确', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { pattern: /111111/, message: '密码不正确', trigger: 'blur' }
    ]
  }
  submitForm () {
    (this.$refs['ruleForm'] as any).validate((valid: Boolean) => {
      if (valid) {
        const { name, password } = this.ruleForm
        const params = {
          username: name,
          password: password
        }
        console.warn('res', (this as any).$post('/app/admin/user/login', params))
        // this.$post('/app/admin/user/login', params).then((res: Object) => {
        //   console.warn('res', res)
        // })
      } else {
        return false
      }
    })
  }
}
</script>
<style lang="less">
  .login {
    width: 100%;
    height: 100%;
    background-color: #000000;
    position: relative;
    .login-img {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    .submit {
      border-color: #ffffff;
      background: none;
    }
    .el-card {
      width: 300px;
      height: 280px;
      z-index: 2;
      background: none;
      opacity: 0.8;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -150px;
      margin-top: -140px;
    }
    .head-title {
      color: #ffffff;
      font-size: 18px;
      text-align: center;
    }
    .el-checkbox {
      color: #ffffff;
    }
    .el-form-item__content {
      text-align: left;
      .el-button {
        width: 260px;
      }
    }
  }
</style>
